<template>
	<view>
		<view class="playing_info u-f-ac">
			<view class="icon"   >
				<image v-if="islike"
				 src="../../../static/playing/cm2_play_icn_loved@2x.png" mode="widthFix" />
				 <image v-else :src="pic[0]" mode="widthFix" />
			</view>
			<view class="icon">
				<image :src="pic[1]" mode="widthFix"
				 @tap="tocomment"/>
			</view>
			<view class="icon">
					<image :src="pic[2]" mode="widthFix" />
			</view>
			<view class="icon">
				<image :src="pic[3]" mode="widthFix"
				@tap="playRelevantOpen" />
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapGetters } from 'vuex';
	let app=getApp();
	export default {
		computed: {
			...mapState(['Id',]),
			...mapGetters(['islike'])
		},
		data() {
			return {
				pic:[
					'../../../static/playing/cm2_play_icn_love@2x.png',
					'../../../static/playing/cm2_play_icn_cmt@2x.png',
					'../../../static/playing/cm2_play_icn_dld@2x.png',
					'../../../static/playing/cm2_play_icn_more@2x.png',
				]
			}
		},
		methods: {
			playRelevantOpen(){
				this.$emit('prOpen')
			},
			tocomment(){
				uni.navigateTo({
					url:'../comment/comment?playingId='+this.Id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.playing_info{
		width: 100%;
		position: absolute;
		z-index: 4;
		padding: 0 50rpx 0 50rpx;
		bottom: 15%;
		left: 0;
		.icon{
			flex: 1;
			image{
				width: 60%;
				transform: translateX(40%);
			}
		}
	}
</style>
